<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <!-- <div class="title">分值分析</div>
          <rz-height></rz-height>
          <div class="line">
            <div class="left">
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fill"
              ></el-image>
            </div>
            <div class="right">
                <tips :type="1"></tips>
              <div>{{ data.ztzrScore }}/{{ data.ztzrTotalScore }}分</div>
              <div>得分/总分值</div>
            </div>
          </div>
          <rz-height></rz-height>
          <div class="line">
            <div class="left">
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fill"
              ></el-image>
            </div>
            <div class="right">
              <div>今日累计扣{{ data.ztzrTrend }}分</div>
            </div>
          </div> -->
          <div class="tips">
            <div class="title">分值分析</div>
            <tips type="1" />
          </div>
          <score-interpretation
            ScoreType="ztzrScore100"
            totalScore="ztzrTotalScore"
          ></score-interpretation>
         <rz-height></rz-height>
         <rz-height></rz-height>
         <rz-height></rz-height>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="always">
          <div class="title">近10天主体责任分值分析</div>
          <rz-height></rz-height>
          <div class="food_line"></div>
        </el-card>
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <rz-height></rz-height>
    <!-- <el-row>
      <el-col :span="24">
        <el-card shadow="always">
          <div class="dialog_titel">
            <div class="title">
主体责任记录列表</div>
          </div>
          <rz-height></rz-height>

          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="createTimeStr" label="添加日期" width="180">
            </el-table-column>
            <el-table-column
              prop="reasonReason"
              label="评估原因及理由"
            >
            </el-table-column>
            <el-table-column prop="score" label="扣分分值" width="80">
              <template slot-scope="scope">
                <div>{{ scope.row.score }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="operator" label="操作人" width="100"> </el-table-column>
            <el-table-column prop="source" label="部门名称" width="180"> </el-table-column>
          </el-table>
      <pagination
        :total="total"
        @pagination="recordRindListByCondition"
        :page.sync="query.page"
      />
        </el-card>
      </el-col>
    </el-row> -->

    <el-row>
      <el-col :span="24">
        <el-card shadow="always">
          <div class="dialog_titel">
            <div class="title">主体责任扣分列表</div>
          </div>
          <rz-height></rz-height>
          <el-row>
            <el-col :span="5">
              <el-date-picker
                v-model="buckleQuery.startDate"
                :picker-options="$pickerOptions"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="2">
              <el-button
                type="primary"
                @click="
                  buckleQuery.page = 1;
                  recordRindListByConditionBuckle();
                "
                >查询</el-button
              >
            </el-col>
          </el-row>
          <rz-height></rz-height>

          <el-table
            :data="buckleData"
            style="width: 100%"
            border
            v-loading="loading"
          >
            <el-table-column prop="createTimeStr" label="添加日期" width="180">
            </el-table-column>
            <el-table-column prop="reasonReason" label="扣分详情">
            </el-table-column>
            <el-table-column prop="score" label="扣分分值" width="100">
              <template slot-scope="scope">
                <div>{{ scope.row.score}}</div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="buckleTotal"
            @pagination="recordRindListByConditionBuckle"
            :page.sync="buckleQuery.page"
          />
        </el-card>
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <rz-height></rz-height>

    <el-card>
      <div class="title">主体责任落实情况一览</div>
      <div class="list" v-if="list.length">
        <div class="item" v-if="list.some(x=>x.name=='食安承诺书')" @click="$router.push(list.filter(x=>x.name=='食安承诺书')[0].url)">
          <div class="item_wapper">
            <div class="title">食安承诺书</div>
             <div class="text">
            <div class="status center green" v-if="data.commitmentSignStr == '是'">
              已签署
            </div>
            <div class="status center red" v-else>未签署</div>
             </div>
          </div>
        </div>

        <div class="item" v-if="list.some(x=>x.name=='食安制度')" @click="$router.push(list.filter(x=>x.name=='食安制度')[0].url)">
          <div class="item_wapper">
            <div class="title">食安制度</div>
              <div class="text">
            <div class="status center green" v-if="data.systemSignStr == '是'">
              已上传
            </div>
            <div class="status  center red" v-else>未上传</div>
              </div>
          </div>
        </div>

        <div class="item" v-if="list.some(x=>x.name=='索证索票')" @click="$router.push(list.filter(x=>x.name=='索证索票')[0].url)">
          <div class="item_wapper">
            <div class="title">索证索票</div>
            <div class="text">
              <div>本年度: {{ data.purchaseBillTotalYear }}批次</div>
              <div>近十天: {{ data.purchaseBillTotal }}批次</div>
            </div>
          </div>
        </div>
        <div class="item" v-if="list.some(x=>x.name=='岗前检查')" @click="$router.push(list.filter(x=>x.name=='岗前检查')[0].url)">
          <div class="item_wapper">
            <div class="title">岗前检查</div>
            <div class="text">
              <div>本年度: {{ data.preJobInspectionSignYear }}次</div>
              <div>近十天: {{ data.preJobInspectionSign }}次</div>
            </div>
          </div>
        </div>

          <div class="item"  v-if="list.some(x=>x.name=='自查管理')&&isZicha" @click="$router.push(list.filter(x=>x.name=='自查管理')[0].url+'?classify=1')">
          <div class="item_wapper">
            <div class="title">常规性自查</div>
            <div class="text">
              <div>本年度: {{ data.routineSelfInspectionSignYear }}次</div>
              <div>近十天: {{ data.routineSelfInspectionSign }}次</div>
            </div>
          </div>
        </div>



  <div class="item" v-if="list.some(x=>x.name=='自查管理')" @click="$router.push(list.filter(x=>x.name=='自查管理')[0].url+'?classify=2')">
          <div class="item_wapper">
            <div class="title">全项目自查</div>
            <div class="text">
              <div>本年度: {{ data.wholeProjectSignYear }}次</div>
              <!-- <div>近十天: {{ data.wholeProjectSign }}次</div> -->
            </div>
          </div>
        </div>
           <div class="item" v-if="list.some(x=>x.name=='自查管理')" @click="$router.push(list.filter(x=>x.name=='自查管理')[0].url+'?classify=4')">
          <div class="item_wapper">
            <div class="title">自查报告</div>
                 <div class="text">
            <div class="status center green" v-if="data.inspectionReportSignYear>0">
              已上传
            </div>
            <div class="status center red" v-else>未上传</div>
                 </div>
          </div>
        </div>



  <div class="item" v-if="list.some(x=>x.name=='留样管理')" @click="$router.push(list.filter(x=>x.name=='留样管理')[0].url)">
          <div class="item_wapper" >
            <div class="title">留样管理</div>
            <div class="text">
              <div>本年度: {{ data.retentionManagementSignYear }}次</div>
              <div>近十天: {{ data.retentionManagementSign }}次</div>
            </div>
          </div>
        </div>


  <div class="item" v-if="list.some(x=>x.name=='废弃物处理')" @click="$router.push(list.filter(x=>x.name=='废弃物处理')[0].url)">
          <div class="item_wapper">
            <div class="title">废弃物处理</div>
            <div class="text">
              <div>本年度: {{ data.wasteDisposalSignYear }}次</div>
              <div>近十天: {{ data.wasteDisposalSign }}次</div>
            </div>
          </div>
        </div>

  <div class="item" v-if="list.some(x=>x.name=='餐具消毒')" @click="$router.push(list.filter(x=>x.name=='餐具消毒')[0].url)">
          <div class="item_wapper">
            <div class="title">餐具消毒</div>
            <div class="text">
              <div>本年度: {{ data.tablewareDisinfectionSignYear }}次</div>
              <div>近十天: {{ data.tablewareDisinfectionSign }}次</div>
            </div>
          </div>
        </div>


<div class="item" v-if="list.some(x=>x.name=='菜谱管理')" @click="$router.push(list.filter(x=>x.name=='菜谱管理')[0].url)">
          <div class="item_wapper">
            <div class="title">菜谱管理</div>
            <div class="text">
              
              <div>共计:{{ data.menuManagementSign }}道菜</div>
            </div>
          </div>
        </div>


      <div class="item" v-if="list.some(x=>x.name=='食谱管理')" @click="$router.push(list.filter(x=>x.name=='食谱管理')[0].url)">
          <div class="item_wapper">
            <div class="title">食谱管理</div>
            <div class="text">
              <div>本年度: {{ data.recipeManagementSignYear }}次</div>
              <div>近十天: {{ data.recipeManagementSign }}次</div>
            </div>
          </div>
        </div>


<div class="item" v-if="list.some(x=>x.name=='培训登记')" @click="$router.push(list.filter(x=>x.name=='培训登记')[0].url)">
          <div class="item_wapper">
            <div class="title">培训登记</div>
                 <div class="text">
            <div class=" center">
              <div>本年度: {{ data.recordCompleteCount }}次</div>

            </div>
                 </div>
          </div>
        </div>

   <div class="item" v-if="list.some(x=>x.name=='陪餐管理')" @click="$router.push(list.filter(x=>x.name=='陪餐管理')[0].url)">
          <div class="item_wapper">
            <div class="title">陪餐管理</div>
            <div class="text">
              <div>本年度: {{ data.mealManagementSignYear }}次</div>
              <div>近十天: {{ data.mealManagementSign }}次</div>
            </div>
          </div>
        </div>


  <div class="item"  v-if="list.some(x=>x.name=='从业人员')" @click="$router.push(list.filter(x=>x.name=='从业人员')[0].url)">
          <div class="item_wapper">
            <div class="title">从业人员</div>
            <div class="text">
              <div class="green">绿码: {{ data.codeGreen }}人</div>
              <div class="yellow">黄码: {{ data.codeYellow }}人</div>
              <div class="red">红码: {{ data.codeRed }}人</div>
            </div>
          </div>
        </div>






      </div>
    </el-card>
  </div>
</template>
<script>
var echarts = require("echarts");
import {
  findTask,
  recordRindListByCondition,
  findListByConditionSafety,
} from "@/api/modules/interpretation";
import {
  CompanyMainPageInfo,
  findByBodyIndustry,
} from "@/api/modules/enterprise";
import addDialog from "@/views/interpretation/components/addDialog";
import tips from "@/views/interpretation/components/tips";
import scoreInterpretation from "@/views/enterprise/components/scoreInterpretation";

export default {
  // props:[],
  // 页面加载
  created() {
    this.buckleQuery.startDate = this.$moment()
      .subtract(1, "days")
      .format("YYYY-MM-DD");
    // this.getList();
    // this.recordRindListByCondition();
    this.findListByConditionSafety();
    this.recordRindListByConditionBuckle();
    this.findTask();
    this.getCompanyMainPageInfo()
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      // tableData: [],
      // data: {},
      recordList: [],
      // query: {
      //   category: 2,
      //   endDate: "",
      //   fsuperviseunitId: sessionStorage.getItem("interpretation"),
      //   isPage: 0,
      //   page: 1,
      //   pageSize: 10,
      //   startDate: "",
      //   type: 1,
      // },
      buckleQuery: {
        category: 2,
        endDate: "",
        fsuperviseunitId: sessionStorage.getItem("interpretation"),
        isPage: 0,
        page: 1,
        pageSize: 10,
        startDate: "",
        type: 1,
      },
      buckleData: [],
      // total: 0,
      buckleTotal: 0,
      loading: false,
      data: {},
      list:[],
      isZicha:true,
    };
  },
  // 方法
  methods: {
    // getList() {
    //   findByFSuperviseunitId({
    //     params: {
    //       fSuperviseunitId: sessionStorage.getItem("interpretation"),
    //     },
    //   }).then((res) => {
    //     this.data = res.data;
    //   });
    // },
    // recordRindListByCondition() {
    //   recordRindListByCondition(this.query).then((res) => {
    //     console.log(res);
    //     this.tableData = res.data;
    //     this.total=res.totalCount
    //     // this.lineInit();
    //   });
    // },
    recordRindListByConditionBuckle() {
      if (!this.buckleQuery.startDate) {
        this.buckleQuery.startDate = "";
      }
      this.buckleQuery.endDate = this.buckleQuery.startDate;
      this.loading = true;
      recordRindListByCondition(this.buckleQuery).then((res) => {
        this.buckleData = res.data;
        this.loading = false;
        this.buckleTotal = res.totalCount;
      });
    },
    lineInit() {
      let chartDom = document.querySelector(".food_line");
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "5%",
          right: "8%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.recordList.map((x) => x.createTimeStr).reverse(),
          axisLabel: {
            //底部文字倾斜
            interval: 0,
            rotate: 25,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "主体责任",
            data: this.recordList.map((x) => x.ztzrScore100).reverse(),
          },
        ],
      };
      myChart.setOption(option);
    },
    findListByConditionSafety() {
      findListByConditionSafety({
        fSuperviseunitId: sessionStorage.getItem("interpretation"),
        indexYear: new Date().getFullYear(),
        startDate: this.$moment().subtract(10, "day").format("YYYY-MM-DD"),
        endDate: this.$moment().format("YYYY-MM-DD"),
        isReverseTimeOrder: "1",
      }).then((res) => {
        this.recordList = res.data;
        this.lineInit();
      });
    },
    findTask() {
      findTask({
        id: sessionStorage.getItem("interpretation"),
      }).then((res) => {
        this.data = res.data[0];
      });
    },







   getCompanyMainPageInfo() {
    // 改业态；
      CompanyMainPageInfo({
        params: {
          id: sessionStorage.getItem("interpretation"),
        },
      }).then((res) => {
        // console.log(res.data.bodyindustryremarks=='高等教育机构');
        // let bodyindustryremarks = "";
        // if (res.data.bodyindustryremarks.includes("托育（托幼）")) {
        //   bodyindustryremarks = "幼托机构食堂";
        // } else if (res.data.bodyindustryremarks.includes("学校")||res.data.bodyindustryremarks=='高等教育机构'||res.data.bodyindustryremarks.includes("中学机构(初、高中)")||res.data.bodyindustryremarks=='中等职业教育机构'||res.data.bodyindustryremarks=='小学机构') {
        //   bodyindustryremarks = "学校食堂";
        // } 
        //  else if (res.data.bodyindustryremarks.includes("集体用餐")||res.data.bodyindustryremarks.includes("中央厨房")) {
        //   bodyindustryremarks = "集体用餐配送或中央厨房";
        // }  else if (res.data.bodyindustryremarks=='医院食堂') {
        //   bodyindustryremarks = "机关企事业单位食堂";
        // } else if (res.data.bodyindustryremarks == "机关单位食堂") {
        //  bodyindustryremarks = "机关企事业单位食堂";
        // }
        // else {
        //   bodyindustryremarks = res.data.bodyindustryremarks;
        // }

        if (
          res.data.bodyindustry == "食品生产企业" ||
          res.data.bodyindustry == "食品销售经营者" ||
          res.data.bodyindustry == "食品流通经营者"
        ) {
         this.isZicha=false
        }
        this.getBodyIndustry({
          bodyindustry: res.data.bodyindustry,
           bodyindustryremarks:res.data.bodyindustryremarks1,
          isspecialfood: res.data.isspecialfood,
        });
      });
    },
    getBodyIndustry(data) {
      findByBodyIndustry(data).then((res) => {
        this.list = res.data
          .filter(
            (x) =>
              x.moduleId !== "2021001" &&
              x.moduleId !== "2021002" 
              // &&
              // x.moduleId !== "2021013"
          )
          .filter((x) => x.parentId == 0);
          this.list=this.list.map(x=>({name:x.moduleName,url:x.modulePathUrl}))
      });
    },















  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    "add-dialog": addDialog,
    "score-interpretation": scoreInterpretation,

    tips,
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
// .line {
//   display: flex;
//   background-color: #99cc66;
//   color: #fff;
//   .left {
//     width: 100px;
//     height: 100px;
//     background-color: red;
//   }
//   .right {
//       position: relative;
//     display: flex;
//     padding-left: 20px;
//     justify-content: space-evenly;
//     flex: 1;
//     align-items: flex-start;
//     flex-direction: column;
//   }
// }
.tips {
  position: relative;
}
.dialog_titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
 
}
 .title {
    font-size: 20px;
    font-weight: 700;
  }
.food_line {
  height: 240px;
  width: 100%;
}
.list {
  display: flex;

  flex-wrap: wrap;
  .item {
    padding: 10px;
    width:180px;
    //  flex: 1;
    height: 130px;
    cursor: pointer;
    .item_wapper {
      padding: 15px;
      height: 100%;
      // background-color: linear-gradient(#72BBFF, #);

        background-image: linear-gradient(to right, #72BBFF , #1D92FF);

      display: flex;
      flex-direction: column;
      .title {
        font-size: 16px;
        color: #fff;
        font-weight: 700;
      }
      .status {
        // padding-left: 20px;
        font-size: 16px;
        font-weight: 700;
      }
      .text {
        flex:1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
align-items: center;
          font-size: 14px;
             font-weight: 700;
      }
      .center{
        text-align: center;
      }
    }
  }
}
</style>